<template>
  <div class="box">
    <header class="header">home header</header>
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <!-- 列表渲染 item 每一个元素 banenrlist 源数据  :key 唯一标识 -->
        <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5">
        <van-grid-item icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" text="京东超市" />
        <van-grid-item icon="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png" text="数码电器" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="item of prolist"
            :key="item.proid"
            :price="item.price"
            :desc="item.desc"
            :title="item.proname"
            :thumb="item.proimg"
          />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import axios from 'axios' // 数据请求模块
import Vue from 'vue'
import { Swipe, SwipeItem, Grid, GridItem, Card, PullRefresh, List } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Card)
Vue.use(PullRefresh)
Vue.use(List)
// 暴露当前的组件
export default {
  data () { // 定义了当前组件的初始化数据
    return {
      bannerlist: [],
      prolist: [],
      isLoading: false,
      loading: false,
      finished: false,
      count: 2
    }
  },
  mounted () { // 生命周期钩子函数 --- 自动执行的
    // axios 返回promise对象，使用then函数继续操作（箭头函数）
    axios.get('http://39.99.182.33/api/banner').then(res => {
      console.log(res.data.data) // 打印输出结果
      this.bannerlist = res.data.data // 修改源数据
    })
    axios.get('http://39.99.182.33/api/pro?count=1').then(res => {
      console.log(res.data.data) // 打印输出结果
      this.prolist = res.data.data // 修改源数据
    })
  },
  methods: {
    onRefresh () {
      this.isLoading = true
      // 请求数据 --- 请求的是第一页的数据
      axios.get('http://39.99.182.33/api/pro?count=1').then(res => {
        console.log(res.data.data) // 打印输出结果
        this.prolist = res.data.data // 修改源数据
        this.isLoading = false
        this.count = 2
        this.finished = false
      })
    },
    onLoad () {
      this.loading = true
      axios.get('http://39.99.182.33/api/pro?count=' + this.count).then(res => {
        console.log(res.data.data) // 打印输出结果
        if (res.data.data.length === 0) {
          this.finished = true
        }
        this.prolist = [...this.prolist, ...res.data.data] // 合并数据
        this.loading = false
        this.count++
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-swipe {
  height: 150px;
  overflow: hidden;
  img {
    width: 100%;
  }
}
</style>
